<template>
  <el-main :style="{ height: mianHeight + 'px' }">
    <!-- 数量统计 -->
    <el-row
      :gutter="20"
      type="flex"
      justify="center"
      style="margin-bottom: 40px"
    >
      <el-col :span="6">
        <div class="show-header" style="background: rgb(45, 183, 245)">
          <div class="show-num">{{ total.classCount }}</div>
          <div class="bottom-text">班级总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header" style="background: rgb(237, 64, 20)">
          <div class="show-num">{{ total.stuCount }}</div>
          <div class="bottom-text">学生总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header">
          <div class="show-num">{{ total.roomCount }}</div>
          <div class="bottom-text">阅览室总数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="show-header" style="background: rgb(255, 153, 0)">
          <div class="show-num">{{ total.suggestCount }}</div>
          <div class="bottom-text">反馈总数</div>
        </div>
      </el-col>
    </el-row>
    <div style="display: flex;">
      <el-card style="flex: 1;">
        <template #header>
          <div class="card-header">
            <span style="color: #000000; font-weight: 600; margin-bottom: 10px">每月预约</span>
          </div>
        </template>
        <div ref="myChart" :style="{ width: '400px', height: '300px' }"></div>
      </el-card>
      <el-card style="margin-left: 20px;flex: 1;">
        <template #header>
          <div class="card-header">
            <span style="color: #000000; font-weight: 600; margin-bottom: 10px">最受欢迎</span>
          </div>
        </template>
        <div ref="myChart1" :style="{ width: '400px', height: '300px' }"></div>
      </el-card>
    </div>
    <el-card class="box-card" style="margin-top: 30px">
      <div slot="header" class="clearfix">
        <span style="color: #000000; font-weight: 600; margin-bottom: 10px"
          >公告列表</span
        >
        <el-divider></el-divider>
      </div>
      <div v-for="(item,index) in noticeList" :key="index" class="text item">
        <span style="font-weight: 600; font-size: 14px">{{ item['noticeTitle'] }}</span
        ><span style="margin-left: 30px; font-size: 14px"
          >{{ item['noticeText'] }}</span
        >
        <span style="margin-left: 30px;">{{ item['createTime'] }}</span>
        <el-divider></el-divider>
      </div>
    </el-card>
  </el-main>
</template>
<script setup lang='ts'>
import { ref, nextTick, onMounted, reactive } from 'vue'
import useInstance from '@/hooks/useInstance';
import {getTotalApi,getTotalMonthApi,getHotRoomApi,getNoticeListApi} from '@/api/home/index'
const mianHeight = ref(0)
const { global } = useInstance()
const myChart = ref<HTMLElement>();
const myChart1 = ref<HTMLElement>();

//总数
const total = reactive({
  classCount:0,
  stuCount:0,
  roomCount:0,
  suggestCount:0
})
//总数统计
const getTotal = async()=>{
  let res = await getTotalApi()
  if(res && res.code == 200){
    Object.assign(total,res.data)
  }
}

//柱状图
const charts1 = async() => {
  //初始化echarts
  const echartInstance = global.$echarts.init(myChart.value);
  //配置项
  let option = reactive({
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar'
      }
    ]
  });
  let res = await getTotalMonthApi()
  if(res && res.code == 200){
    option.xAxis.data = res.data.names
    option.series[0].data = res.data.values
  }
  //通过axios发送请求，获取数据，设置到上面的option的x轴和y轴的数据里面即可
  echartInstance.setOption(option)
}
//饼图
const charts2 = async() => {
  const myChart = global.$echarts.init(myChart1.value);
  let option = reactive({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
  let res = await getHotRoomApi()
  if(res && res.code == 200){
    option.series[0].data = res.data;
  }
  //通过axios发送请求，获取数据，设置到上面的option的x轴和y轴的数据里面即可
  myChart.setOption(option)
}
//查询公告列表
const noticeList = ref([])
const getNoticeList = async()=>{
  let res = await getNoticeListApi()
  if(res && res.code == 200){
    noticeList.value = res.data;
  }
}
onMounted(() => {
  charts1();
  charts2();
  getTotal()
  getNoticeList()
  nextTick(() => {
    mianHeight.value = window.innerHeight - 100
  })
})
</script>
<style scoped lang='scss'>
.bottom-text {
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: absolute;
  font-weight: 600;
}
.show-header {
  background: #00c0ef;
  color: #fff;
  height: 80px;
  border-radius: 5px;
  position: relative;
}
.show-num {
  font-size: 38px;
  font-weight: 600;
  padding: 5px;
}
</style>